<template>

<div class="user-info">
    
    <div class="user-info-content">
        <div class="head-portrait">
            <img :src="userInfo.headPortrait" alt="head-portrait">
        </div>
        
        <h1 class="nickname">
            {{userInfo.nickname}}
        </h1>
    </div>

    <div class="node-info">
        <div class="node-num">
             <label>
                便签数量
             </label>
             <span class="num">
                 {{noteNum}}
             </span> 个
             
        </div>
    </div>
    
</div>

</template>

<script>

/**
 * @name 用户信息
 * @param {object} 用户信息
 * 
 */


export default {

    props:{
        userInfo:{
            nickName: '未登录',
            avatarUrl: '',
        },
        noteNum: 0
    },
    
    data: function() {	
        return {}
    },

    methods: {}
}
</script>

<style scoped lang='less'>

@size: 86rpx;

.user-info{
    display: flex;
    justify-content: space-between;
    
    padding: @interval 3*@interval;
    background: @mainColor;
    color: #fff;
}

.user-info-content{
    display: flex;
    align-content: center;
    text-align: center;
    padding-top: 2*@interval;
    
    .head-portrait{
        order: 2;
        order: 1;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-content: center;

        width: @size;
        height: @size;
        border-radius: 100%;

        img{
            height: 100%;
        }
    }

    .nickname{
        order: 1;
        margin: 20rpx 0 0  10px;
        
        
    }
    
}

.node-info{
    order: -1;

    label{
        display: block;
    }

    .num{
        font-size: 140rpx;
    }
}

</style>    